import { InjectionToken } from "@angular/core";

export type MonkFormDesignConfig = {[key: string]: any};

export const MONK_FORMDEISGN_CONFIG = new InjectionToken<MonkFormDesignConfig>('monk-form-design-config');
export declare namespace MonkFormDesign {
  type rule = ({required: boolean} | { pattern: string}) & { message: string}
  type rules = Array<rule>
  type option = Record<'value'|'label', string>

  type CommonProperty = Record<'label'| 'model' |'key'| 'help'|'icon', string>
 
  export type InputType = {
    type: 'input',
    options: Record<'type'| 'width' |'defaultValue'| 'placeholder'|'addonBefore'|'addonAfter', string> &
      Record<'clearable'| 'hidden' |'disabled', boolean> &
      {maxLength: number | null}
    rules: Array<rule>
  } & CommonProperty & {important?: string}

  export type TextareaType = {
    type: 'textarea',
    options: Record<'width' |'defaultValue'| 'placeholder', string> &
      Record<'clearable'| 'hidden' |'disabled', boolean> &
      Record<'minRows' | 'maxRows', number> &
      {maxLength: number | null}
    rules: Array<rule>
  } & CommonProperty

  export type NumberType = {
    type: 'number',
    options: Record<'width' | 'placeholder', string> &
      Record<'hidden' |'disabled', boolean> &
      Record<'min'| 'max' | 'precision' | 'defaultValue', number | null> &
      {step: number}
    rules: Array<rule>
  } & CommonProperty

  export type SelectType = {
    type: 'select',
    options: Record<'width' | 'placeholder' | 'dynamicKey', string> & Partial<Record<'dynamicInjectFuncToken' | 'dynamicEvalFuncToken', string>> &
      Record<'multiple' |'disabled'|'clearable'|'hidden'|'dynamic' | 'showSearch', boolean> &
      {options: Array<option> ,defaultValue: undefined}
    rules: Array<rule>
  } & CommonProperty
  
  export type CheckboxType = {
    type: 'checkbox',
    options: Record<'dynamicKey', string> & Partial<Record<'dynamicInjectFuncToken' | 'dynamicEvalFuncToken', string>> &
      Record<'disabled'|'hidden'|'dynamic', boolean> &
      {options: Array<option> ,defaultValue: unknown[]}
    rules: Array<rule>
  } & CommonProperty

  export type RadioType = {
    type: 'radio',
    options: Record<'dynamicKey', string> & Partial<Record<'dynamicInjectFuncToken' | 'dynamicEvalFuncToken', string>> &
      Record<'disabled'|'hidden'|'dynamic', boolean> &
      {options: Array<option> ,defaultValue: undefined | string}
    rules: Array<rule>
  } & CommonProperty

  export type DateType = {
    type: 'date',
    options: Record<'width' | 'placeholder' | 'format', string> &
      Record<'range'|'showTime'|'disabled'|'hidden'|'clearable', boolean> &
      {rangePlaceholder: Array<string>,defaultValue: undefined | string, rangeDefaultValue: Array<any>}
    rules: Array<rule>
  } & CommonProperty
  
  export type TimeType = {
    type: 'time',
    options: Record<'width' | 'placeholder' | 'format', string> &
      Record<'disabled'|'hidden'|'clearable', boolean> &
      {defaultValue: undefined | string}
    rules: Array<rule>
  } & CommonProperty

  export type RateType = {
    type: 'rate',
    options: 
      Record<|'disabled'|'hidden'|'allowHalf', boolean> &
      {defaultValue: undefined | number, max: number}
    rules: Array<rule>
  } & CommonProperty
  
  export type SliderType = {
    type: 'slider',
    options: 
      Record<|'disabled'|'hidden'|'showInput', boolean> &
      Record<|'min'|'max'|'step', number> &
      { width: string, defaultValue: undefined | number}
    rules: Array<rule>
  } & CommonProperty

  export type BatchType = {
    type: 'batch',
    list: Array<AllComponentType>,
    options: 
      Record<|'disabled'|'hidden'|'showLabel'|'hideSequence', boolean> &
      { width: string, scrollY: undefined | number}
  } & CommonProperty

  export type SwitchType =
  { 
    type: 'switch', 
    options: Record<'defaultValue' |'hidden'| 'disabled', boolean>,
    rules: Array<rule>}
  & CommonProperty;

  export type ButtonType =
    { 
      type: 'button', 
      options: Record<'type'| 'handle' | 'dynamicFun', string> 
        & Record<'hidden'| 'disabled', boolean>} &
    Record<'label' | 'icon' | 'key' , string>
    
  export type AlertType =
    { 
      type: 'alert', 
      options: Record<'type'| 'description', string> 
        & Record<'showIcon' | 'banner' | 'hidden' | 'closable', boolean>} &
    Record<'label' | 'icon' | 'key' , string>
        
  export type TextType =
  { 
    type: 'text', 
    options: Record<'textAlign'| 'color' | 'fontFamily' | 'fontSize', string> 
      & Record<'hidden' | 'showRequiredMark', boolean>} &
  Record<'label' | 'icon' | 'key' , string> 
      
  export type HtmlType =
    {
      type: 'html',
      options: { hidden: boolean, defaultValue: string }
    } &
    Record<'label' | 'icon' | 'key', string>

  export type ProcessType =
  {
    type: 'process', options: any,
  } & Record<'label'| 'key' | 'icon', string>

  export type AllComponentType = InputType | TextareaType | NumberType | SelectType | CheckboxType | RadioType 
    | DateType | TimeType | RateType | SliderType | BatchType | SwitchType | ButtonType | AlertType | TextType | HtmlType | ProcessType

    | UploadFileType | UploadImgType | UploadCustomType | TreeSelectType
    | CascaderType | SelectInputListType | EditorType;

  export type DividerLayout =
    { type: 'divider', options: { orientation: string } }
    & Omit<CommonProperty, 'help'>
    
  export type CardLayout =
  { type: 'card', list: Array<AllType> }
  & Omit<CommonProperty, 'help'>
  
  export type TabsLayout =
    { type: 'tabs',
       options: { animated: boolean, tabBarGutter: number | null } &
        Record<'tabPosition'| 'type'| 'size', string>,
      columns: Array<option & {list: Array<AllType>}> }
    & Omit<CommonProperty, 'help'>
      
  export type GridLayout =
  { type: 'grid',
     options: { gutter: number | null },
    columns: Array<{span: number, list: Array<AllType>}> }
  & Omit<CommonProperty, 'help'>

        
  export type TableLayout =
  { type: 'table',
     options: Record<'bordered' | 'bright' | 'small', boolean> & Record<'width'| 'customStyle', string>,
    trs: Array<{tds: Array<Record<'colspan'|'rowspan', number> & {list: Array<AllType>}>}>}
  & Omit<CommonProperty, 'help'>

  export type CollapseLayout =
  { type: 'collapse',
     options: Record<'bordered' | 'expandIconPosition', string>
       &{ accordion: unknown, ghost: boolean },
    columns: Array<option & { list: Array<AllType>}> }
  & Omit<CommonProperty, 'help'>

  export type BlockLayout =
  { type: 'block', list: Array<AllType> }
  & Omit<CommonProperty, 'help'>

  export type AllLayout = DividerLayout | CardLayout | 
    TabsLayout | GridLayout | TableLayout | CollapseLayout | BlockLayout

  export type AllType = AllComponentType | AllLayout

  export type Config = {
    list: Array<AllType>,
    config: Record<'labelWidth'| 'previewWidth', number> &
      Record<'labelCol'| 'wrapperCol', Record<'xs'|'sm'|'md'|'lg'|'xl'|'xxl', number>> & {
        hideRequiredMark: boolean,
        customStyle: string,
        labelLayout: 'flex' | 'Grid',
        layout: 'horizontal' | 'vertical' | 'inline'
    }

  }

  
  // ---暂时没用到--

    type UploadFileType = Omit<typeof uploadFile, 'type'> & {type: 'uploadFile'}
    type UploadImgType = Omit<typeof uploadImg, 'type'> & {type: 'uploadImg'}
    type UploadCustomType = Omit<typeof uploadCustom, 'type'> & {type: 'uploadCustom'}
    type TreeSelectType = Omit<typeof treeSelect, 'type'> & {type: 'treeSelect'}
    type CascaderType = Omit<typeof cascader, 'type'> & {type: 'cascader'}
    type SelectInputListType = Omit<typeof selectInputList, 'type'> & {type: 'selectInputList'}
    type EditorType = Omit<typeof editor, 'type'> & {type: 'editor'}
  // ---暂时没用到--
}

const a: MonkFormDesign.SwitchType = {
  type: "switch", // 表单类型
  label: "开关", // 标题文字
  icon: "icon-kaiguan3",
  options: {
    defaultValue: false, // 默认值 Boolean 类型
    hidden: false, // 是否隐藏，false显示，true隐藏
    disabled: false // 是否禁用
  },
  model: "",
  key: "",
  help: "",
  rules: [
    {
      required: false,
      message: "必填项"
    }
  ]
}

const uploadFile =  {
  type: "uploadFile", // 表单类型
  label: "上传文件", // 标题文字
  icon: "icon-upload",
  options: {
    defaultValue: "[]",
    multiple: false,
    disabled: false,
    hidden: false, // 是否隐藏，false显示，true隐藏
    drag: false,
    downloadWay: "a",
    dynamicFun: "",
    width: "100%",
    limit: 3,
    data: "{}",
    fileName: "file",
    headers: {},
    action: "http://cdn.kcz66.com/uploadFile.txt",
    placeholder: "上传"
  },
  model: "",
  key: "",
  help: "",
  rules: [
    {
      required: false,
      message: "必填项"
    }
  ]
}

const  uploadImg = {
  type: "uploadImg",
  label: "上传图片",
  icon: "icon-image",
  options: {
    defaultValue: "[]",
    multiple: false,
    hidden: false, // 是否隐藏，false显示，true隐藏
    disabled: false,
    width: "100%",
    data: "{}",
    limit: 3,
    placeholder: "上传",
    fileName: "image",
    headers: {},
    action: "http://cdn.kcz66.com/upload-img.txt",
    listType: "picture-card"
  },
  model: "",
  key: "",
  help: "",
  rules: [
    {
      required: false,
      message: "必填项"
    }
  ]
}
const uploadCustom = {
  type: "uploadCustom", // 表单类型
  label: "上传", // 标题文字
  icon: "icon-upload",
  options: {
    defaultValue: "[]",
    multiple: false,
    disabled: false,
    hidden: false, // 是否隐藏，false显示，true隐藏
    drag: false,
    downloadWay: "a",
    dynamicFun: "",
    width: "100%",
    limit: 3,
    data: "{}",
    fileName: "file",
    headers: {},
    action: "http://cdn.kcz66.com/uploadFile.txt",
    placeholder: "上传"
  },
  model: "",
  key: "",
  help: "",
  rules: [
    {
      required: false,
      message: "必填项"
    }
  ]
}

const treeSelect = {
  type: "treeSelect", // 表单类型
  label: "树选择器", // 标题文字
  icon: "icon-tree",
  options: {
    disabled: false, //是否禁用
    defaultValue: undefined, // 默认值
    multiple: false,
    hidden: false, // 是否隐藏，false显示，true隐藏
    clearable: false, // 是否显示清除按钮
    showSearch: false, // 是否显示搜索框，搜索选择的项的值，而不是文字
    treeCheckable: false,
    placeholder: "请选择",
    dynamicKey: "",
    dynamic: true,
    options: [
      {
        value: "1",
        label: "选项1",
        children: [
          {
            value: "11",
            label: "选项11"
          }
        ]
      },
      {
        value: "2",
        label: "选项2",
        children: [
          {
            value: "22",
            label: "选项22"
          }
        ]
      }
    ]
  },
  model: "",
  key: "",
  help: "",
  rules: [
    {
      required: false,
      message: "必填项"
    }
  ]
}

const cascader = {
  type: "cascader", // 表单类型
  label: "级联选择器", // 标题文字
  icon: "icon-guanlian",
  options: {
    disabled: false, //是否禁用
    hidden: false, // 是否隐藏，false显示，true隐藏
    defaultValue: undefined, // 默认值
    showSearch: false, // 是否显示搜索框，搜索选择的项的值，而不是文字
    placeholder: "请选择",
    clearable: false, // 是否显示清除按钮
    dynamicKey: "",
    dynamic: true,
    options: [
      {
        value: "1",
        label: "选项1",
        children: [
          {
            value: "11",
            label: "选项11"
          }
        ]
      },
      {
        value: "2",
        label: "选项2",
        children: [
          {
            value: "22",
            label: "选项22"
          }
        ]
      }
    ]
  },
  model: "",
  key: "",
  help: "",
  rules: [
    {
      required: false,
      message: "必填项"
    }
  ]
}

const selectInputList = {
  type: "selectInputList",
  label: "选择输入列",
  icon: "icon-biaoge",
  columns: [
    {
      value: "1",
      label: "选项1",
      list: []
    },
    {
      value: "2",
      label: "选项2",
      list: []
    }
  ],
  options: {
    disabled: false,
    multiple: true, // 是否允许多选
    hidden: false, // 是否隐藏，false显示，true隐藏
    showLabel: false,
    width: "100%"
  },
  model: "",
  key: "",
  help: ""
}

const editor = {
  type: "editor",
  label: "富文本",
  icon: "icon-LC_icon_edit_line_1",
  list: [],
  options: {
    height: 300,
    placeholder: "请输入",
    defaultValue: "",
    chinesization: true,
    hidden: false, // 是否隐藏，false显示，true隐藏
    disabled: false,
    showLabel: false,
    width: "100%"
  },
  model: "",
  key: "",
  help: "",
  rules: [
    {
      required: false,
      message: "必填项"
    }
  ]
}